<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-28 16:21:26
 * @LastEditTime: 2020-03-23 23:29:25
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/vant.min.js"></script>
    <script type="text/javascript" src="../../script/fastclick.js"></script>
    <script type="text/javascript" src="../../script/base.js"></script>
    <script type="text/javascript" src="../../script/db.js"></script>
    <script type="text/javascript" src="../../script/moment.js"></script>
    <script type="text/javascript" src="../../script/calendar.js"></script>
    <style type="text/css">
        .content {
            background: #fff !important;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        .toggle {
            height: 20px;
            text-align: center;
        }

        .toggle img {
            width: 26px;
        }

        .fix:after {
            display: table;
        }

        table {
            width: 100%;
        }

        .calendar {
            position: relative;
            width: 100%;
            overflow: hidden;
            transition: all 0.4s;
        }

        .calendar-transition .calendar-month,
        .calendar-transition .calendar-week {
            -webkit-transition: -webkit-transform .3s ease-out;
            -webkit-transition: transform .3s ease-out;
            transition: transform .3s ease-out;
        }

        .calendar-month-wrap {
            display: none;
            position: relative;
            display: none;
        }

        .calendar-month-head {
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .calendar-month {
            position: absolute;
            left: -100%;
            top: 0;
            width: 300%;
        }

        .calendar-week {
            position: absolute;
            left: -100%;
            top: 0;
            width: 300%;
        }

        .calendar-week {
            display: none;
        }

        .calendar-month-view,
        .calendar-week-view {
            float: left;
            width: 33.33%;
            text-align: center;
        }

        .calendar-month-view th,
        .calendar-week-view th {
            line-height: 44px;
            color: #9e9e9e;
            font-weight: 500;
        }

        .calendar-month-view td,
        .calendar-week-view td {
            line-height: 44px;
            width: 14.28%;
        }

        .calendar td:active {
            background-color: #eee;
        }

        .calendar-expand {
            text-align: center;
            background-color: #ccc;
        }

        .calendar .i-before {
            color: #999;
        }

        .calendar .i-after {
            color: #333;
        }

        .calendar .i-today>div {
            width: 42px;
            line-height: 42px;
            background: #cd1b21;
            color: #fff;
            border-radius: 99px;
            margin: 0 auto;
        }

        .calendar .i-event {
            position: relative;
        }

        .calendar .i-event:after {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #cd1b21;
            right: 10%;
            top: 0;
        }

        .list {
            border-top: 8px solid #f2f4f5;
            flex: 1;
            overflow: hidden;
            position: relative;
        }

        .list>div {
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 10px 15px;

        }

        .list>div>div {
            margin-bottom: 10px;

        }

        .m {
            /* font-weight: 700; */
            font-size: 20px;
            margin-bottom: 10px;
        }

        .l {
            float: left;
            width: 60px;
        }

        .r {
            /* padding-left: 50px; */
            float: left;
            width: calc(100% - 60px);
        }

        .r .v {
            line-height: 30px;
            font-size: 13px;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #000;
            position: relative;
        }

        .r .v .c {
            position: absolute;
            left: -20px;
            top: 10px;
            width: 11px;
            height: 11px;
            border-radius: 10px;
            z-index: 2;
        }

        .r .v .line {
            position: absolute;
            left: -15px;
            top: 10px;
            width: 1px;
            bottom: -30px;
            background: #e0e0e0;
            z-index: 1;
        }

        .c-1 {
            background: #cd1b21;
        }

        .c-2 {
            background: #1abd27;
        }

        .c-3 {
            background: #a5a5a5;
        }

        .r .t {
            font-size: 12px;
            color: #9e9e9e;
        }

        .add-t {
            position: fixed;
            right: 20px;
            bottom: 30px;
            border-radius: 30px;
            text-align: center;
            margin-top: -10px;
            padding: 10px;
        }

        .add-t .add_ {
            width: 40px;
        }

        .add-t .i {
            display: inline-block;
            width: 40px;
            border-radius: 30px;
            text-align: center;
            height: 40px;
            padding: 10px;
            margin-left: 5px;
            line-height: 16px;
        }

        .add-t .i img {
            width: 100%;
            height: 100%;
        }

        .no {
            color: #9e9e9e;
            font-size: 14px;
        }

        .row {
            overflow: hidden;
            margin-bottom: 15px;
        }

        .d {
            font-weight: 700;
            line-height: 30px;
            font-size: 16px;
        }

        .visit {
            position: absolute;
            right: 0;
            top: 0;
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #cd1b21;
            font-size: 13px;
        }

        .dd {
            opacity: 0;
            transition: all 0.6s;
            text-align: right;
        }

        .tran {
            filter: none;
            transition: all 0.6s;
        }

        .tan-m {
            filter: blur(10px);
        }

        .op {
            opacity: 1;
        }

        .mask-w {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0);
            z-index: 3;
        }

        .rotate {
            transform: rotate(180deg);
        }

        .bottom {
            font-size: 13px;
            min-height: 30px;
            overflow: hidden;
        }

        .bottom>div {
            float: left;
            padding: 0 10px;
            line-height: 30px;
        }

        .cc {
            width: 11px;
            height: 11px;
            border-radius: 10px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full tran" :class="showDetail?'tan-m':''">
            <van-nav-bar class="head" :title="selectDate" left-arrow @click-left="onClickLeft"></van-nav-bar>
            <div class="body-no-bottom">
                <div class="content">
                    <div class="cal">
                        <div id="calendar" class="calendar">
                            <!-- 月日历 -->
                            <div id="calendar-month-wrap" class="calendar-month-wrap fix">
                                <!-- <div id="calendar-month-head" class="calendar-month-head"></div> -->
                                <div id="calendar-month" class="calendar-month fix">
                                    <div id="calendar-month-viewA" class="calendar-month-view"></div>
                                    <div id="calendar-month-viewB" class="calendar-month-view"></div>
                                    <div id="calendar-month-viewC" class="calendar-month-view"></div>
                                </div>
                            </div>

                            <!-- 周日历 -->
                            <div id="calendar-week" class="calendar-week">
                                <div id="calendar-week-viewA" class="calendar-week-view"></div>
                                <div id="calendar-week-viewB" class="calendar-week-view"></div>
                                <div id="calendar-week-viewC" class="calendar-week-view"></div>
                            </div>
                        </div>
                        <div class="toggle" @click="toggleTrip($event)"><img id="arrow-s"
                                src="../../image/trip/d-arrow.png" /></div>
                    </div>

                    <div class="list">
                        <div>
                            <div v-for="row in planDetailList">

                                <div class="m" v-html="getSimpleDateArea(row)"></div>
                                <div class="row" v-for="item in row.node" :date-time="item.BDate">
                                    <div class="l">
                                        <div class="d">{{item.BDate.split('-')[2]}}</div>
                                        <div style="font-size: 12px;">{{getWeekDay(item.BDate)}}</div>
                                    </div>
                                    <div class="r">
                                        <div v-for="(detail,detailIndex) in item.node" @click="intoCustomer(detail)">
                                            <div class="v">
                                                <span class="c" :class="getStatusColor(detail)"></span>
                                                <span class="line" v-if="detailIndex != item.node.length - 1"></span>
                                                <span>{{detail.ClientName}}</span>
                                            </div>
                                            <div class="t" style="visibility: hidden;">小透明~~~</div>
                                        </div>

                                    </div>
                                </div>
                                <div class="no" v-if="row.node && !row.node.length">暂未安排行程</div>
                            </div>
                            <div class="no" v-show="!planDetailList.length"><img style="width: 100%;"
                                    src="../../image/zw.png" />
                            </div>
                        </div>


                    </div>
                </div>
                <van-loading v-if="showLoading" />
            </div>

            <div class="bottom">
                <div>
                    <span class="cc c-1"></span>
                    <span>已过期</span>
                </div>
                <div>
                    <span class="cc c-2"></span>
                    <span>未完成</span>
                </div>
                <div>
                    <span class="cc c-3"></span>
                    <span>已完成</span>
                </div>
            </div>


        </div>
        <div class="add-t" style="z-index: 5;" v-if="!showDetail">

            <div style="text-align: right;" @click="showDetail = true;">
                <img class="add_" src="../../image/add.png" />
            </div>
        </div>

        <div class="add-t" style="z-index: 4;">
            <div class="dd" :class="showDetail?'op':''">
                <div style="margin-bottom: 15px;" @click="openReport">
                    <span style="font-size: 14px;color: #9e9e9e;">报表</span>
                    <span class="i" style="background: #cd1b21;">
                        <img src="../../image/module/module-28.png" />
                    </span>
                </div>
                <div style="margin-bottom: 15px;" @click="addNew(2)">
                    <span style="font-size: 14px;color: #9e9e9e;">行程</span>
                    <span class="i" style="background: #cd1b21;">
                        <img src="../../image/xc.png" />
                    </span>
                </div>
                <div @click="fastPunchClock(2)">
                    <span style="font-size: 14px;color: #9e9e9e;">快捷打卡</span>
                    <span class="i" style="background: #cd1b21;">
                        <img src="../../image/xc.png" />
                    </span>
                </div>
            </div>
        </div>

        <div class="mask-w" v-show="showDetail" @click="showDetail = false;"></div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        api.addEventListener({
            name: 'selectSuccess'
        }, function (ret, err) {
            var array = ret.value.array;
            var ids = [];
            for (var i in array) {
                ids.push(array[i].ClientID);
            }
            var selectPlan = vm.initPlanList.filter(function (row) {
                return row.PSDate <= vm.selectDate && row.PEDate >= vm.selectDate;
            })
            var obj = {
                S_Type: 2,
                S_NBranchID: branchData.id,
                S_SDate: vm.selectDate,
                S_EDate: vm.selectDate,
                S_BHID: selectPlan[0].BHID,
                S_ClientID: ids.join(),
                S_BHDeID: 0
            }
            FLD.ajax('APP_BHJHADDN', obj, function (res) {
                if (res.ds[0].status == 200) {
                    layer.open({
                        content: '客户新增成功',
                        skin: 'msg',
                        time: 2
                    });
                    vm.getMonthData();
                } else {
                    layer.open({
                        content: res.ds[0].msg,
                        skin: 'msg',
                        time: 2
                    });
                }
            })
        });

        api.addEventListener({
            name: 'refreshTripList'
        }, function (ret, err) {
            vm.getMonthData();
        });

        var branchData = api.pageParam.branchData;
        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                showDetail: false,
                selectDate: FLD.getFormatDate().split(' ')[0],
                // selectBHData: [],
                planDetailList: [],
                initPlanDetailList: [],
                initPlanList: []

            },
            created: function () {
                var that = this;
                // that.getMonthData();

            },
            methods: {
                toggleTrip(e) {
                    var that = this;
                    if ($('#arrow-s').hasClass('rotate')) {
                        $('#arrow-s').removeClass('rotate');
                    } else {
                        $('#arrow-s').addClass('rotate');
                    }
                    calendar.toggle();
                },
                isShowNoData() {
                    var that = this;
                    var a = that.initPlanList.filter(function (row) {
                        return row.PSDate <= that.selectDate && row.PEDate >= that.selectDate;
                    })
                    return a.length ? false : true;
                },
                getMonthData() {
                    var that = this;
                    FLD.ajax('APP_MRXZXCJHA', { S_NBranchID: branchData.id }, function (res) {
                        that.planDetailList = [];
                        var obj = {
                            S_NBranchID: branchData.id,
                            S_SDate: FLD.getFormatDate(that.getCurrentMonthFirst(that.selectDate)).split(' ')[0],
                            S_EDate: FLD.getFormatDate(that.getCurrentMonthLast(that.selectDate)).split(' ')[0]
                        }
                        FLD.ajax('APP_BHJHListN', obj, function (res) {
                            that.initPlanDetailList = JSON.parse(JSON.stringify(res.ds));
                            that.initPlanList = JSON.parse(JSON.stringify(res.ds1));
                            var planDetailList = [];
                            for (var i in res.ds1) {
                                planDetailList.push({
                                    BHID: res.ds1[i].BHID,
                                    PSDate: res.ds1[i].PSDate,
                                    PEDate: res.ds1[i].PEDate,
                                    node: []
                                })
                            }
                            for (var i in res.ds) {
                                for (var j in planDetailList) {
                                    if (res.ds[i].BHID == planDetailList[j].BHID) {
                                        var y = 0;
                                        for (var l in planDetailList[j].node) {
                                            if (res.ds[i].BDate == planDetailList[j].node[l].BDate) {
                                                y = 1;
                                                planDetailList[j].node[l].node.push(res.ds[i])
                                            }
                                        }
                                        if (y == 0) {
                                            planDetailList[j].node.push({
                                                BDate: res.ds[i].BDate,
                                                node: [res.ds[i]]
                                            })
                                        }
                                    }
                                }
                            }
                            that.planDetailList = planDetailList;
                            that.$nextTick(function () {
                                var date_time_dom = $('.row[date-time="' + that.selectDate + '"]');

                                if (date_time_dom.length) {
                                    $('.list>div').scrollTop(date_time_dom.position().top);
                                } else {
                                    setTimeout(function () {
                                        $('.list>div').scrollTop(0)
                                    }, 10)
                                }



                            })

                        })
                    })

                },
                intoCustomer(detail) {
                    var that = this;
                    if (that.getStatusColor(detail) == 'c-1') {
                        layer.open({
                            content: '当前行程已过期!',
                            skin: 'msg',
                            time: 2
                        });
                    } else {
                        api.openWin({
                            name: 'customerSign',
                            url: 'customerSign.html',
                            reload: true,
                            slidBackEnabled: false,
                            pageParam: {
                                ClientID: detail.ClientID,
                                FStatus: detail.FStatus,
                                BDate: detail.BDate,
                                BHDeID: detail.BHDeID
                            }

                        })
                    }

                },
                getWeekDay(date) {
                    var dt = new Date(date.split("-")[0], date.split("-")[1] - 1, date = date.split("-")[2]);
                    var weekDayArray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
                    return weekDayArray[dt.getDay()];
                },
                getSimpleDateArea(row) {
                    var that = this;
                    if (row.PSDate) {
                        var date1 = row.PSDate.split('-')[1] + '-' + row.PSDate.split('-')[2];
                        var date2 = row.PEDate.split('-')[1] + '-' + row.PEDate.split('-')[2];
                        return date1 + '&nbsp;-&nbsp;' + date2
                    }

                },
                getStatusColor(detail) {
                    var that = this;
                    if (detail.FStatus == 0) {
                        if (FLD.getFormatDate(new Date(detail.BDate)).split(' ')[0] >= FLD.getFormatDate(new Date()).split(' ')[0]) {
                            return 'c-2';
                        } else {
                            return 'c-1';
                        }
                    } else {
                        return 'c-3';
                    }
                },
                openReport() {
                    var that = this;
                    api.openWin({
                        name: 'tripReport',
                        url: 'tripReport.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            planList: that.initPlanList,
                            branchData: branchData
                        }
                    })
                },
                fastPunchClock() {
                    var that = this;
                    var selectPlan = that.initPlanList.filter(function (row) {
                        return row.PSDate <= FLD.getFormatDate().split(' ')[0] && row.PEDate >= FLD.getFormatDate().split(' ')[0];
                    })
                    if(!selectPlan.length){
                        return false;
                    }
                    api.openWin({
                        name: 'customerSign',
                        url: 'customerSign.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            ClientID: 0,
                            FStatus: 2,
                            BDate: FLD.getFormatDate(new Date()).split(' ')[0],
                            BHDeID: 0,
                            trip: {
                                S_Type: 2,
                                S_NBranchID: branchData.id,
                                S_SDate: FLD.getFormatDate().split(' ')[0],
                                S_EDate: FLD.getFormatDate().split(' ')[0],
                                S_BHID: selectPlan[0].BHID,
                                S_ClientID: '',
                                S_BHDeID: 0
                            }
                        }

                    })
                },
                addNew(index) {
                    var that = this;
                    that.showDetail = false;
                    var selectPlan = that.initPlanList.filter(function (row) {
                        return row.PSDate <= that.selectDate && row.PEDate >= vm.selectDate;
                    })
                    if (that.selectDate < FLD.getFormatDate().split(' ')[0]) {
                        layer.open({
                            content: '当前所选时间禁止安排行程!',
                            skin: 'msg',
                            time: 2
                        });
                    } else if (!selectPlan.length) {
                        layer.open({
                            content: '当前日期还未安排计划 请先设置计划日期',
                            skin: 'msg',
                            time: 2
                        });
                    } else {
                        api.openWin({
                            name: 'signCustomerList',
                            url: 'signCustomerList.html',
                            reload: true,
                            slidBackEnabled: false,
                            pageParam: {
                                branchData: branchData,
                                selectPlan: selectPlan[0],
                                selectDate: that.selectDate
                            }
                        })
                    }

                },
                // 获取当前月的第一天
                getCurrentMonthFirst(param_date) {
                    var date = param_date ? new Date(param_date) : new Date();
                    date.setDate(1);
                    return date;
                },
                // 获取当前月的最后一天
                getCurrentMonthLast(param_date) {
                    var date = param_date ? new Date(param_date) : new Date();
                    var currentMonth = date.getMonth();
                    var nextMonth = ++currentMonth;
                    var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
                    var oneDay = 1000 * 60 * 60 * 24;
                    return new Date(nextMonthFirstDay - oneDay);
                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })


        function bindTdClick() {
            $('.calendar-month-view .day-value').unbind('click').bind('click', function () {
                $('.day-value').parent().removeClass('i-today');
                $(this).parent().addClass('i-today');
                vm.selectDate = $(this).parent().attr('data-time');
                // vm.getMonthData();

                var date_time_dom = $('.row[date-time="' + vm.selectDate + '"]');
                if (date_time_dom.length) {
                    $('.list>div').scrollTop(date_time_dom.position().top);
                } else {
                    $('.list>div').scrollTop(0);
                }


            })
            $('.calendar-week-view .day-value').unbind('click').bind('click', function () {
                $('.day-value').parent().removeClass('i-today');
                $(this).parent().addClass('i-today');
                vm.selectDate = $(this).parent().attr('data-time');
                // vm.getMonthData();

                var date_time_dom = $('.row[date-time="' + vm.selectDate + '"]');
                if (date_time_dom.length) {
                    $('.list>div').scrollTop(date_time_dom.position().top);
                } else {
                    $('.list>div').scrollTop(0);
                }

            })
        }

        var schedules = [
            // { is_event: 1, is_sign: 1 },
            // { is_event: 2, is_sign: 2 }
        ];


        var calendar = new Calendar(
            document.getElementById('calendar'),
            null,
            function (self, dateRange) {
                if (self.activeView.name === 'month') {
                    var date = self.getMonth();
                    var dateValue = date.year + '-' + (date.month < 10 ? '0' + date.month : date.month) + '-01';
                    if (!$('#calendar-month-viewB .i-today').length) {
                        $('[data-time="' + dateValue + '"]').addClass('i-today');
                        vm.selectDate = dateValue;

                    } else {
                        vm.selectDate = $('#calendar-month-viewB .i-today').attr('data-time');
                    }
                    vm.getMonthData();

                    bindTdClick();
                } else if (self.activeView.name === 'week') {
                    var date = self.getMonth();
                    var dateValue = date.year + '-' + (date.month < 10 ? '0' + date.month : date.month) + '-' + (date.day < 10 ? '0' + date.day : date.day);
                    if (!$('#calendar-week-viewB .i-today').length) {
                        $('[data-time="' + dateValue + '"]').addClass('i-today');
                        vm.selectDate = dateValue;

                    } else {
                        vm.selectDate = $('#calendar-week-viewB .i-today').attr('data-time');
                    }
                    vm.getMonthData();

                    bindTdClick();

                }
                // 传入事件数组
                // self.update(schedules);
            },
            function () {
                console.log('toggle');
                // bindTdClick();
            }
        );
        calendar.init();

        $(function () {
            bindTdClick();
        })

    }


</script>

</html>